<template>
  <div class="operation">
    <div ref="content">
      <div class="title">广州双色摄影工作室 电子合同预览</div>
      <div class="date">订单日期: 2024-02-25</div>
      <div class="table">
        <table>
          <tr>
            <td>先生姓名</td>
            <td colspan="2"><input class="middle" /></td>
            <td>联系方式</td>
            <td colspan="2"><input class="middle" /></td>
          </tr>
          <tr>
            <td>微信</td>
            <td><input class="small" /></td>
            <td>套系名称</td>
            <td><input class="small" /></td>
            <td>套系金额</td>
            <td><input class="small" /></td>
          </tr>
          <tr>
            <td>定金</td>
            <td><input class="small" /></td>
            <td>余款</td>
            <td><input class="small" /></td>
            <td>保底</td>
            <td><input class="small" /></td>
          </tr>
          <tr>
            <td>入底</td>
            <td><input class="small" /></td>
            <td>入册</td>
            <td><input class="small" /></td>
            <td>精修</td>
            <td><input class="small" /></td>
          </tr>
          <tr>
            <td>物流地址</td>
            <td colspan="5"><input class="large" /></td>
          </tr>
          <tr>
            <td>门店地址</td>
            <td colspan="5"><input class="large" /></td>
          </tr>
          <tr>
            <td colspan="3">产品内容</td>
            <td colspan="3">说明</td>
          </tr>
          <tr style="min-height: 300px">
            <td colspan="3"><textarea class="big" type="text" /></td>
            <td colspan="3">
              <textarea type="text" class="big" />
            </td>
          </tr>
          <tr>
            <td>拍摄日期</td>
            <td><input class="small" /></td>
            <td>选片日期</td>
            <td><input class="small" /></td>
            <td>取件日期</td>
            <td><input class="small" /></td>
          </tr>
          <tr>
            <td>客人签字</td>
            <td @click="sign" colspan="2">
              <img class="small" v-if="signImg != ''" :src="signImg" alt="" />
            </td>
            <td>门店签字</td>
            <td colspan="2"><input class="middle" /></td>
          </tr>
        </table>
      </div>
    </div>
    <div class="bottom">
      <el-button size="small" type="primary">推送客户</el-button>
      <el-button size="small" type="primary">推送打印</el-button>
      <el-button size="small" type="primary" @click="downloadContract"
        >下载合同</el-button
      >
      <el-button size="small" type="primary">关闭预览</el-button>
    </div>
    <el-dialog title="签字框" :visible.sync="showCanvas" width="35%">
      <div>
        <canvas
          ref="canvas"
          @mousedown="startDrawing"
          @mousemove="draw"
          @mouseup="stopDrawing"
        ></canvas>
        <div class="btn">
          <el-button class="clear" @click="clearCanvas">消除</el-button>
          <el-button class="clear" type="primary" @click="saveSignature">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
export default {
  data() {
    return {
      showCanvas: false,
      isDrawing: false, // 是否正在绘制
      context: null, // Canvas上下文
      signImg: "",
    };
  },
  mounted() {},
  methods: {
    downloadContract() {
      const content = this.$refs.content;
      html2canvas(content).then((canvas) => {
        const pdf = new jsPDF("p", "mm", "a4");
        const imgData = canvas.toDataURL("image/png");
        pdf.addImage(imgData, "PNG", 10, 10, 180, 240);
        pdf.save("exported.pdf");
      });
    },
    // 鼠标按下时触发
    startDrawing(event) {
      this.isDrawing = true; // 开始绘制
      const { offsetX, offsetY } = event; // 获取鼠标相对于Canvas的偏移量
      this.context.beginPath(); // 开始新的路径
      this.context.moveTo(offsetX, offsetY); // 将路径移动到鼠标位置
    },
    // 当鼠标在 Canvas 上移动时触发
    draw(event) {
      if (!this.isDrawing) return; // 如果没有在绘制中，则返回
      const { offsetX, offsetY } = event; // 获取鼠标相对于Canvas的偏移量
      this.context.lineTo(offsetX, offsetY); // 绘制路径
      this.context.stroke(); // 绘制路径的边框
    },
    // 当鼠标松开时触发，用于停止绘制签名
    stopDrawing() {
      this.isDrawing = false; // 停止绘制
    },
    // 清除
    clearCanvas() {
      this.context.clearRect(
        0,
        0,
        this.$refs.canvas.width,
        this.$refs.canvas.height
      ); // 清除Canvas上的内容
    },
    // 保存
    saveSignature() {
      const dataURL = this.$refs.canvas.toDataURL(); // 获取签名图片的Base64编码
      // 在这里可以将dataURL发送到服务器保存，或者进行其他操作
      console.log(dataURL); // 输出签名的Base64编码到控制台
      this.signImg = dataURL;
      this.showCanvas = false;
    },
    sign() {
      this.showCanvas = true;
      this.$nextTick(() => {
        this.context = this.$refs.canvas.getContext("2d"); // 获取Canvas上下文
        this.$refs.canvas.width = 500; // 设置Canvas的宽度
        this.$refs.canvas.height = 300; // 设置Canvas的高
      });
    },
  },
};
</script>

<style  scoped lang="less">
canvas {
  border: 1px solid #dedede;
  margin-left: 20px;
}
input{
  outline: none;
}
input:focus{
  border:none;
}
.operation {
  width: 820px;
  height: auto;
  margin-left: 40px;
  .title {
    font-size: 18px;
    text-align: center;
    margin: 30px 0;
  }
  .date {
    font-size: 14px;
    text-align: left;
    margin-bottom: 20px;
  }
}
table,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
td {
  text-align: center;
  width: 100px;
  height: 40px;
}
.small,
.middle,
.large {
  border: none;
  padding-left: 4px;
  height: 40px;
}
.small {
  width: 130px;
}
.middle {
  width: 260px;
}
.large {
  width: 650px;
}
.big {
  padding: 6px;
  width: 380px;
  height: 300px;
}
.bottom {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.btn {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  .clear {
    width: 150px;
    text-align: center;
  }
}
</style>